<template>
    <div>
        <br />
  
        <headers/>
        <div class="container">

            <div class="item_column">
                <div class="left">   
                    
                </div>

                <div class="right"> 

                    <div>
                        <div id='main' style="width:500px;height:500px"></div>
                    </div>
                    
                </div>

            </div>

        </div>
        
    </div>
</template>
  
<script>
// import maxios from '../http/axios'
import headers from './headers.vue'
import * as echarts from 'echarts';
import {reactive} from 'vue'
export default {

    components: {
      'headers':headers,
    },
  
    data() {
      return {
        
      }
    },
    setup() {
        let data1 = reactive({'data':[]})
        let data2 = reactive({'data':[]})

        let initEarcharts=()=>{
            let chartDom = document.getElementById('main');
            let myChart = echarts.init(chartDom);
            let option;
            option = {
            xAxis: {
                type: 'category',
                data: data1.data
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: data2.data,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
                }
            ]
            };

            option && myChart.setOption(option);
        }

        //初始化websocket
        let initWebsocket=()=>{
            let id = 'scorechange2'
            let ws = new WebSocket("ws://localhost:8000/web_conn/"+id)
            ws.onopen=function(){
                console.log('建立connection')
            }
            ws.onmessage=function(mes){
                let data = JSON.parse(mes.data)
                data1.data = data[1]
                data2.data = data[0]
                initEarcharts()
            }
            ws.close=function(){
                console.log('关闭')
            }
        }
        

        return{
            data1,
            data2,
            initEarcharts,
            initWebsocket,
        }
        //更新echarts数据
    },

    methods: {

      

    },
    mounted() {
        this.initWebsocket()
       
    }
  }
</script>
  
<style scoped>
@import url("../assets/style.css");


</style>